<template>
  <view class="router-view bcl-active " style="padding:10px;">

    <view class="" style="background:#fff;">
      

                
      		  <u-select v-model="show" :list="certificate_type" label-name="type" value-name="type" @confirm="confirm"></u-select>
              <uni-cell  title="证书类别" :noPointer="true" >
                  <view slot="value" class="text-right" @click="show = true">
                    <input
                      type="text"
                      disabled
                      class="uni-input height"
                      placeholder="请选择证书类别"
                      v-model="types"
                    />
                  </view>
              </uni-cell>
              
                
      		  <u-select v-model="shows" :list="certificate_name" label-name="name" value-name="name" @confirm="confirms"></u-select>
              <uni-cell  title="证书名称" :noPointer="true" >
                  <view slot="value" class="text-right" @click="shows = true">
                    <input
                      type="text"
                      disabled
                      class="uni-input height"
                      placeholder="请选择证书名称"
                      v-model="name"
                    />
                  </view>
              </uni-cell>
              <uni-cell  title="证书编号" :noPointer="true" >
                  <view slot="value" class="text-right">
                    <input
                      type="text"
                      class="uni-input height"
                      placeholder="证书编号"
                      v-model="num"
                    />
                  </view>
              </uni-cell>
              <uni-cell  title="证书图片" :noPointer="true" >
                  <view slot="value" class="text-right" >

 	<view class="addBox uni-upload-button  pointer-filter" ref="input" style="background:none;">
              <text class="uptext">上传图片</text>
               <image :src="photo" v-show="photoshow" class="photoimg" />

	</view>
                    <!-- <input
                      type="text"
                      class="uni-input height"
                      placeholder="上传"
                      disabled
                      v-show="inputshow"
                      v-model="img"
                    /> -->
                    <!-- <view style="display:block;width:200px;padding:0 10px 0 0;color:grey;">
                      <view v-show="inputshow" v-model="img"  >上传</view>

                      <image :src="photo" v-show="photoshow" class="photoimg" />
                      
                    </view> -->
                  </view>
              </uni-cell>
              
            <uni-cell title="获得时间" :noPointer="true">
              <view slot="value">
                <picker
                  mode="date"
                  @change="changeStartTime"
                  fields="day"
                  style="width: 200upx; height: 100upx;"
                >
                  <view class="input text-right">
                    <text>{{ get_date || "请选择开始时间" }}</text>
                  </view>
                </picker>
              </view>
            </uni-cell>

           
                    
        <button
          class="uni-button uni-button-lg uni-button-full mt-30"
          @tap="saveInfo"
        >
          保存
        </button>
    </view>
  </view>
</template>

<script>
import {
  userIntro,
  delProject,
  delJob,
  addProject,
  addJob,
  editProject,
  editJob,
  addEduition,
  resumeTrainingsSave,
  resumeLanguagesSave,
  resumeCertificatesSave
} from "@/apis/user";

import config from "@/config";
import uniCell from "@/components/cell";
export default {

  components: {
    uniCell,
  },
  data() {
    return {
      types:'',
      name:'',
      num:'',
      type:'',
      img:'',
      certificate_type:[],
      certificate_name:[],
      show: false,
      shows: false,
      inputshow:true,
      photoshow:false,
      photo:'',
      get_date:''
      
    };
  },

  onLoad(options) {
    // console.log("options",options)
    this.type =  options.type
    var type = options.type
    var titie;
    if(type == 6){
      titie = '添加证书'
    }
    uni.setNavigationBarTitle({
      title: titie
    })
    this.getUserIntro();
  },
  mounted(){
     this.$nextTick(function(){
				var input = document.createElement('input')
				input.style.width="80";
				input.type = 'file'//添加file类型
				input.multiple = 'multiple'// 可以选择多个
				// input.accept=".pdf" // 限制只能上传PDF文件，可以不限制，能上传任何类型
				input.style.height="50px";
				input.style.position="absolute";
				// input.style.top="0";
				// input.style.right="0";
				input.style.opacity="0";
				input.style.border="1px solid red";
				input.style.overflow="hidden"; //防止注意input 元素溢出
				input.id = 'file';
				var _this = this;
				setTimeout(() => {
					this.$refs.input.$el.appendChild(input); // 这里可能会报$el找不到错误，所以加了延时器，报错的原因是this.$refs.input没有找到为null，所以需要等页面结构加载完后再将其添加进去
					input.onchange = (event) => { // 点击上传选择文件
                 var file = event.target.files;
                if (file.length > 0) {
                  file.forEach(item => { // 因为后台限制，只能一个一个文件的上传，所以当选择多个文件后，需要遍历一个一个调用上传接口
                    _this.uploadAPI(item); // 上传图片
                  })
                }
					}
				}, 1000)
			})
  },

  methods: {
     uploadAPI(path){
       var fData = new FormData();
           fData.append("file1",path);
        
        
			  var _this=this
        var xhr = new XMLHttpRequest();
        
        var surl = config.remote+'/uploadFile';
       
        uni.showLoading({
          title: '上传中',
           mask: false  

        })
			  xhr.open("POST",surl,true); 
			  xhr.onload = function(e) {

        };
			  xhr.onreadystatechange = (e) =>{
          if(xhr.readyState == 4 && xhr.status == 200){    //上传后台成功
          
              var datsd = JSON.parse(xhr.responseText)
              if(datsd.code == 1000){
                  _this.img = datsd.data.file_url
                  _this.photo= config.imgurl+datsd.data.file_url;
                  _this.photoshow = true
              }
              uni.hideLoading()
                 
				
				  } else {
					  uni.hideLoading()
				  }
        }
			  xhr.setRequestHeader('enctype',"multipart/form-data");
			  xhr.send(fData)
        
    
         this.img = path;
     },
    confirm(e) {
        console.log(e);
        this.types = e[0].value
    },
    confirms(e) {
        console.log(e);
        this.name = e[0].value
    },
    
    changeStartTime(event) {
      console.log(event.target.value)
      this.get_date = event.target.value
    },

    async getUserIntro() {
      let { code, data, message } = await userIntro();
      if (code === 200){
        this.userIntro = data;
        this.certificate_type = data.certificate_type
        this.certificate_name = data.certificate_name
        console.log(data)
      } 
      
    },
    // zhengshiimg(){
    //   uni.chooseImage({
    //     count: 1,
    //   })
    //   .then((chunk) => {
    //     let [err, res] = chunk;
    //     if (res) {
    //       console.log("res1111",res.tempFiles[0])
    //       this.inputshow = false
    //       this.photoshow = true
    //       let paths = res.tempFilePaths[0];
    //       this.photo=res.tempFilePaths[0];
    //       this.img = res.tempFiles[0];
          
    //     }
    //   })
    // },
    async saveInfo(){
      var params = {
          type:this.types,
          name:this.name,
          num: this.num,
          url:this.img,
          get_date:this.get_date,
          resume_type:'certificates',
          id:''

      };
      let { code, data } = await resumeCertificatesSave(params);
      if (code === 200) {
        // await this.getUserIntro();
        
        this.$toast("操作成功");
        setTimeout(()=>{
         
        uni.navigateBack();
        },1000);
      }
    },
    

    
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .user-info {
    .uni-avatar {
      width: 100upx;
      height: 100upx;
      image {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
  .work {
    .icon-plus {
      width: 40upx;
      height: 40upx;
      text-align: center;
      padding: 5upx;
    }

    .work-content {
      padding-top: 40upx;
      border-bottom: 1upx solid $color-border-deep;
      padding-bottom: 40upx;

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }

      .time-tag {
        padding: 10upx 20upx;
        border-radius: 100upx;
      }
    }
  }
  .uni-input {
    margin-bottom: 0;
    border: 0;
  }
}
.photoimg{
  width:35px;
  height:35px;
  // margin:19px 0 0 0;
  display: flex;
  
  margin:0 0 0 -100px;
}
.uptext{
  color:grey;
  display: flex;
  position: absolute;
}
</style>
